import { TComponent } from '@material/typeing';
import { Children, Fragment, ReactElement, ReactNode, forwardRef } from 'react';
import { isArray } from '@material/helpers';
import $style from './index.scss';
export interface SpaceProps extends TComponent {
    layout?: 'vertical' | 'horizontal';
    direction?: 'ltr' | 'rtl';
    wrap?: boolean;
    split?: ReactNode;
    size: number | number[];
}

const defaultProps: Partial<SpaceProps> = {
    layout: 'horizontal',
    direction: 'ltr'
};

const Space = forwardRef<HTMLDivElement, SpaceProps>((props, ref) => {
    const { className, style, children, size, direction, layout, wrap, split, ...restProps } = {
        ...defaultProps,
        ...props
    };

    const childrenList = Children.toArray(children);
    const getMarginStyle = (index: number) => {
        const isLastOne = childrenList.length === index + 1;
        const marginDirection = direction === 'rtl' ? 'marginLeft' : 'marginRight';
        if (typeof size === 'number') {
            const margin = size;
            if (wrap) {
                return isLastOne
                    ? { marginBottom: margin }
                    : {
                          [`${marginDirection}`]: margin,
                          marginBottom: margin
                      };
            }
            return !isLastOne
                ? {
                      [layout === 'vertical' ? 'marginBottom' : marginDirection]: margin
                  }
                : {};
        }
        if (isArray(size)) {
            const marginHorizontal = size[0];
            const marginBottom = size[1];
            if (wrap) {
                return isLastOne
                    ? { marginBottom }
                    : {
                          [`${marginDirection}`]: marginHorizontal,
                          marginBottom
                      };
            }
            if (layout === 'vertical') {
                return { marginBottom };
            }
            return { [`${marginDirection}`]: marginHorizontal };
        }
    };
    return (
        <div
            className={[
                $style.space,
                { [$style.vertical]: layout === 'vertical', [$style.wrap]: wrap },
                className
            ]}
            style={style}
            {...restProps}
            ref={ref}
        >
            {childrenList.map((child, index) => {
                const key = (child as ReactElement)?.key || index;
                const shouldRenderSplit = split !== undefined && split !== null && index > 0;
                return (
                    <Fragment key={key}>
                        {shouldRenderSplit ? (
                            <div className={[$style['item-split']]}>{split}</div>
                        ) : null}
                        <div
                            className={[$style.item]}
                            style={getMarginStyle(index)}
                        >
                            {child}
                        </div>
                    </Fragment>
                );
            })}
        </div>
    );
});

Space.displayName = 'Space';

export default Space;
